<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<style type="text/css">
			/* 下拉多选样式 需要引用*/
	        select[multiple]+.layui-form-select>.layui-select-title>input.layui-input{ border-bottom: 0}
	        select[multiple]+.layui-form-select dd{ padding:0;}
	        select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary]{ margin:0 !important; display:block; line-height:36px !important; position:relative; padding-left:26px;}
	        select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] span{line-height:36px !important; float:none;}
	        select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] i{ position:absolute; left:10px; top:0; margin-top:9px;}
	        .multiSelect{ line-height:normal; height:auto; padding:4px 10px; overflow:hidden;min-height:38px; margin-top:-38px; left:0; z-index:99;position:relative;background:none;}
	        .multiSelect a{ padding:2px 5px; background:#908e8e; border-radius:2px; color:#fff; display:block; line-height:20px; height:20px; margin:2px 5px 2px 0; float:left;}
	        .multiSelect a span{ float:left;}
	        .multiSelect a i{ float:left; display:block; margin:2px 0 0 2px; border-radius:2px; width:8px; height:8px; background:url(layui/images/close.png) no-repeat center; background-size:65%; padding:4px;}
	        .multiSelect a i:hover{ background-color:#545556;}
   
		</style>
	</head>
	<body>
<body style="padding: 10px">

            <form class="layui-form">
                <div class="layui-block">
                    <label class="layui-form-label">多选</label>
                    <div class="layui-input-inline">
                        <select name="多选" multiple>
                            <option value="">请选择您的兴趣爱好</option>
                            <option>sing1</option>
                            <option value="sing2" selected>sing2</option>
                            <option>SING1-大写</option>
                            <option selected>movie1</option>
                            <option>movie2</option>
                            <option>movie3</option>
                            <option>MOVIE4</option>
                            <option>swim</option>
                            <option>moon</option>
                        </select>
                    </div>
                </div>

            </form>


	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
	    layui.use(['form','code'], function () {
        var form = layui.form,
        $ = layui.$;

        // json 格式化+高亮
        function syntaxHighlight(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }
    })
	</script>
	</body>
</html>